﻿function $(id) {
    return document.getElementById(id);
}
function Marquee(id, toFollow, speed) {
    var doScroll;
    var scrollBox_x = "<table cellpadding='0' cellspacing='0'><tr><td id='" + id + "abox'>" + $(id).innerHTML + "</td><td id='" + id + "bbox'>" + $(id).innerHTML + "</td></tr></table>";
    var scrollBox_y = "<table cellpadding='0' cellspacing='0'><tr><td id='" + id + "abox'>" + $(id).innerHTML + "</td></tr><tr><td id='" + id + "bbox'>" + $(id).innerHTML + "</td></tr></table>";
    var begin = function() {
        switch (toFollow) {
            case "left":
                $(id).innerHTML = scrollBox_x;
                doScroll = setInterval(function() {
                    if ($(id).scrollLeft == $(id + "abox").offsetWidth) $(id).scrollLeft = 0;
                    $(id).scrollLeft++;
                }, speed);
                break;
            case "right":
                $(id).innerHTML = scrollBox_x;
                doScroll = setInterval(function() {
                    if ($(id).scrollLeft <= 0) $(id).scrollLeft = $(id + "bbox").offsetWidth;
                    $(id).scrollLeft--;
                }, speed);
                break;
            case "top":
                $(id).innerHTML = scrollBox_y;
                doScroll = setInterval(function() {
                    if ($(id).scrollTop == $(id + "abox").offsetHeight) $(id).scrollTop = 0;
                    $(id).scrollTop++;
                }, speed);
                break;
            case "bottom":
                $(id).innerHTML = scrollBox_y;
                doScroll = setInterval(function() {
                    if ($(id).scrollTop <= 0) $(id).scrollTop = $(id + "bbox").offsetHeight;
                    $(id).scrollTop--;
                }, speed);
                break;
        }
    }
    begin();
    $(id).onmouseover = function() { clearInterval(doScroll); }
    $(id).onmouseout = function() { begin(); }
}
window.onload = function() {
//      Marquee("demo2", "left", 30);
        Marquee("demo1", "right", 20);
        Marquee("demo3", "top", 50);
//      Marquee("demo4", "bottom", 30);
}